{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/EventEmitter/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"7df9ee41-c25a-5894-87d8-71a3926066d7","excerpt":"앵귤러에는 부모로 이벤트를 보내는 방법에 @Output과 EventEmitter가 있다. appchild.component.ts AppChildComponent에는 handleclick 함수를 호출하는 button이 있다. appcomponent.ts AppComponent안에 AppChildComponent를 사용하고 있다. 만약에 AppChildComponent의 ts 코드 안에서 이벤트를 부모로 넘기고 싶을 때, EventEmitter와 Output을 에서 import…","html":"<p>앵귤러에는 부모로 이벤트를 보내는 방법에 <strong>@Output</strong>과 <strong>EventEmitter</strong>가 있다.</p>\n<ul>\n<li>\n<p>appchild.component.ts</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Component<span class=\"token punctuation\">,</span> Input<span class=\"token punctuation\">,</span> EventEmitter<span class=\"token punctuation\">,</span> Output <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@angular/core'</span><span class=\"token punctuation\">;</span>\n<span class=\"token decorator\"><span class=\"token at operator\">@</span><span class=\"token function\">Component</span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  selector<span class=\"token operator\">:</span> <span class=\"token string\">'app-child'</span><span class=\"token punctuation\">,</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">&lt;button class='btn btn-primary' (click)=\"handleclick()\">Click me&lt;/button> </span><span class=\"token template-punctuation string\">`</span></span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AppChildComponent</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">handleclick</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token builtin\">console</span><span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hey I am  clicked in child'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<ul>\n<li>AppChildComponent에는 handleclick 함수를 호출하는 button이 있다.</li>\n</ul>\n</li>\n<li>\n<p>appcomponent.ts</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Component<span class=\"token punctuation\">,</span> OnInit <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@angular/core'</span><span class=\"token punctuation\">;</span>\n<span class=\"token decorator\"><span class=\"token at operator\">@</span><span class=\"token function\">Component</span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  selector<span class=\"token operator\">:</span> <span class=\"token string\">'app-root'</span><span class=\"token punctuation\">,</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">&lt;app-child>&lt;/app-child></span><span class=\"token template-punctuation string\">`</span></span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AppComponent</span> <span class=\"token keyword\">implements</span> <span class=\"token class-name\">OnInit</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">ngOnInit</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<ul>\n<li>AppComponent안에 AppChildComponent를 사용하고 있다.</li>\n<li>만약에 AppChildComponent의 ts 코드 안에서 이벤트를 부모로 넘기고 싶을 때, <strong>EventEmitter</strong>와 <strong>Output</strong>을 <code class=\"language-text\">@angular/core</code>에서 import하면 된다.</li>\n</ul>\n</li>\n<li>\n<p>appchildcomponent.ts</p>\n<div class=\"gatsby-highlight\" data-language=\"typescript\"><pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Component<span class=\"token punctuation\">,</span> EventEmitter<span class=\"token punctuation\">,</span> Output <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@angular/core'</span><span class=\"token punctuation\">;</span>\n<span class=\"token decorator\"><span class=\"token at operator\">@</span><span class=\"token function\">Component</span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  selector<span class=\"token operator\">:</span> <span class=\"token string\">'app-child'</span><span class=\"token punctuation\">,</span>\n  template<span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">&lt;button class='btn btn-primary' (click)=\"valueChanged()\">Click me&lt;/button> </span><span class=\"token template-punctuation string\">`</span></span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">class</span> <span class=\"token class-name\">AppChildComponent</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token decorator\"><span class=\"token at operator\">@</span><span class=\"token function\">Output</span></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> valueChange <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">EventEmitter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  Counter <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">valueChanged</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// You can give any function name</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>counter <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>counter <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>valueChange<span class=\"token punctuation\">.</span><span class=\"token function\">emit</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>counter<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p><img src=\"https://www.infragistics.com/community/resized-image/__size/640x480/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/3051.pic7.png\" alt=\"https://www.infragistics.com/community/resized-image/__size/640x480/__key/communityserver-blogs-components-weblogfiles/00-00-00-09-43/3051.pic7.png\"></p>\n</li>\n</ul>","frontmatter":{"title":"EventEmitter","date":"November 08, 2019"}}},"pageContext":{"slug":"/Today I Learned/EventEmitter/","previous":{"fields":{"slug":"/Today I Learned/새로운_translateExt_번역_package가_생겼다!/"},"frontmatter":{"title":"새로운 translateExt 번역 package가 생겼다!","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/object.keys90__object.assign/"},"frontmatter":{"title":"object.keys90 / object.assign","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}